<template>
	<view :style="{ '--color': color }">
		<view class="navBar" :style="{ height: `${totalHeight}px` }">
			<view class="titleBar" :style="{ height: `${navHeight}px`, width: `${navWidth}px` }">
				<view class="iconfont icon-xiangzuo white size34 BackIfont" @click="$back()"></view>
				<text class="Title ellipsis">自购明细</text>
			</view>
		</view>
		<view class="Topbox" :style="{ 'padding-top': `${totalHeight}px` }">
			<view class="row j-centert white size36 bold">{{ date[current].year }}</view>
			<view class="boxDate">
				<view class="iconfont icon-xiangzuo dateIcon" :class="{ opacity05: Left }" @click="changMonth(1)"></view>
				<swiper :indicator-dots="false" :current="current" :autoplay="false" class="swiper" display-multiple-items="3" :disable-touch="true" @change="SwiperChange">
					<swiper-item class="swiper-item"></swiper-item>
					<swiper-item class="swiper-item" v-for="(item, index) in date" :key="index" :class="{ Active: current == index }" @click="current = index">
						{{ item.name }}
					</swiper-item>
					<swiper-item class="swiper-item"></swiper-item>
				</swiper>
				<view class="iconfont icon-xiangyouxiayiye dateIcon" :class="{ opacity05: Rigth }" @click="changMonth(2)"></view>
			</view>

			<view class="row j-centert white size30 m-top20">总自购：{{ allData.total_count }}</view>
			<view class="row j-centert white h6 m-top20">本月自购：{{ allData.month_count }}</view>
		</view>

		<view class="list" v-for="(item, index) in pageData" :key="index" @click="toDetail(item.order_id)">
			<view class="flex-1 d-flex f-column">
				<text class="list_txt">订单号：{{ item.order_code }}</text>
				<view class="row a-center m-top10 m-bot10">
					<image :src="$imgUrls(item.buyer_headimg)" mode="aspectFill" class="v_headimg"></image>
					<view class="d-flex f-column">
						<text class="color_33 size26 ellipsis">{{ item.buyer_name }}</text>
						<text class="color_33 size26">{{ item.buyer_tel }}</text>
					</view>
				</view>
				<text class="list_txt">订单金额：￥{{ item.total_money }}</text>
				<text class="list_txt">购买时间：{{ item.buyer_addtime }}</text>
			</view>
			<view class="iconfont icon-a-zujian32 color_cc size26"></view>
		</view>

		<emptys title="暂无当前内容" v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			Year: 2024,
			date: [],
			current: 6,
			down_v_id: '',
			limit: 20,
			page: 1,
			pageData: [],
			allData: '',
			getMore: true
		};
	},
	onLoad(opt) {
		if (opt.down_v_id) this.down_v_id = opt.down_v_id;
		const Year = new Date().getFullYear();
		const Month = new Date().getMonth() + 1;
		for (let i = 0; i < Month; i++) {
			let stringMonth = String(i + 1);
			this.date.push({
				year: Year,
				month: stringMonth.padStart(2, '0'),
				name: `${stringMonth}月`
			});
		}
		this.current = this.date.length - 1;
		this.new_query_income_list();
	},
	methods: {
		new_query_income_list() {
			this.$http
				.get({
					url: '/zzj_singleSaleApi/new_query_income_list',
					data: {
						down_v_id: this.down_v_id,
						page: this.page,
						limit: this.limit,
						thisY: this.date[this.current].year,
						thisM: this.date[this.current].month,
						mine: 1
					}
				})
				.then((res) => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					this.allData = res;
					const result = res.data || [];
					this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
					if (result.length < this.limit) this.getMore = !this.getMore;
				});
		},
		toDetail(order_id) {
			this.toUrl(`/orderPage/order/orderDetail?order_id=${order_id}`);
		},
		changMonth(Val) {
			if (this.current == 0 && Val == 1) return;
			if (this.current == this.date.length - 1 && Val == 2) return;
			Val == 1 ? this.current-- : this.current++;
		},
		SwiperChange(e) {
			this.current = e.detail.current;
			this.page = 1;
			this.getMore = true;
			this.new_query_income_list();
		}
	},
	computed: {
		...mapState(['color', 'System', 'navHeight', 'totalHeight', 'navWidth']),
		Left() {
			return this.current == 0 ? true : false;
		},
		Rigth() {
			return this.current == this.date.length - 1 ? true : false;
		}
	},
	onReachBottom() {
		if (!this.getMore) return;
		this.page++;
		this.new_query_income_list();
	}
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.navBar {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: var(--color);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.titleBar {
	display: flex;
	align-items: center;
	overflow: hidden;
}

.BackIfont {
	padding: 20rpx;
}

.Title {
	flex: 1;
	color: #ffffff;
	font-size: 30rpx;
}

.Topbox {
	width: 100%;
	// height: 420rpx;
	background-color: var(--color);
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.boxDate {
	width: 100%;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: rgba(255, 255, 255, 0.4);
	margin-top: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}

.dateIcon {
	color: #fff;
	font-size: 30rpx;
	padding: 20rpx;
}

.swiper {
	flex: 1;
	height: 100%;
}

.swiper-item {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 28rpx;
}

.Active {
	font-size: 36rpx;
}

.list {
	width: 710rpx;
	margin: 0 auto;
	padding: 24rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f1f1f1;
	display: flex;
	align-items: center;
	margin-top: 24rpx;
	border-radius: 10rpx;
	box-shadow: rgba(241, 241, 241, 0.1) 0px 6rpx 20rpx;
}

.list_txt {
	color: #333;
	font-size: 26rpx;
	padding: 6rpx 0;
}
.v_headimg {
	width: 60rpx;
	height: 60rpx;
	border-radius: 10rpx;
	border: 1rpx solid var(--color);
	margin-right: 20rpx;
}
</style>
